<template>
	<div>
		<el-button
			type="primary"
			size="small"
			@click="getSymInfo($event)"
			>调用 rust 函数获取系统信息</el-button
		>
		<ul>
			<li>系统类型: {{ hostEnv.ostype }}</li>
			<li>系统版本: {{ hostEnv.version }}</li>
			<li>系统位数: {{ hostEnv.bitness }}</li>
		</ul>
	</div>

	<div>
		<el-button
			type="primary"
			size="small"
			@click="testHandle($event)"
			>传递和接收对象类型的数据</el-button
		>
		<div>接受到的参数: {{ testValue }}</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed } from "vue";
	import { ElMessage } from "element-plus";

	const hostEnv = ref<OsInfoType>({});

	// 当使用Tauri API npm包时
	// import { invoke } from "@tauri-apps/api/tauri";

	// 当使用Tauri全局脚本时(不使用npm包)
	// 确保 `tauri.conf.json 中设置 `build.withGlobalTauri` 为 true
	const invoke = window.__TAURI__.invoke;

	const getSymInfo = (e: Event) => {
		invoke(
			"get_sym_info", // 执行那个命令
			{ invokeMessage: "我是js传递的参数" } // 传递的参数(注意要和rust函数的小驼峰命名对应)
		).then((res: OsInfoType | unknown) => {
			// 返回值
			if (res instanceof Object) {
				hostEnv.value = res;
			}
		});
	};

	const testResult = ref({ });
	const testValue = computed(() => JSON.stringify(testResult.value));
	const testHandle = (e: Event) => {
		invoke("test_handle", {
			invokeParams: { name: "张三", age: 18 }
		}).then((res: TestMapType | unknown) => {
			if (res instanceof Object) {
				console.log("testHandle res: ", res);
				testResult.value = res;
			}
		});
	};
</script>

<style lang="scss" scoped></style>
